<!--收藏课程和正在学习的课程列表-->
<div class="course-list" id="homeCourse">
  <div class="row" v-if="type == 1">
    <div class="empty" v-if="learn_courses.length==0">暂无学习课程</div>
    <div class="col-lg-3 col-md-4 col-xs-6" v-for="(course, index) in learn_courses">
      <div class="course-item">
        <div class="course-img">
          <a :href="'/course/' + course.course.id + '/join/info'" target="_blank">
            <img :src="course.course.cover" :alt="course.course.name" class="img-responsive">
          </a>
        </div>
      <div class="course-info">
        <div class="title">{{course.course.name}}</div>
          <div class="metas clearfix">
              <span class="course-price-widget">
                <span class="price">
                  <span class="color-success">{{course.course.price == 0 ? '免费' : course.course.price+'元'}}</span>
                </span>
              </span>
          </div>
      </div>
      </div>
    </div>
  </div>

  <div class="row" v-if="type == 2">
    <div class="empty" v-if="collect_courses.length==0">暂无收藏课程</div>
    <div class="col-lg-3 col-md-4 col-xs-6" v-for="(course, index) in collect_courses">
      <div class="course-item">
        <div class="course-img">
          <a :href="'/course/' + course.id + '/info'" target="_blank">
            <img :src="course.course.cover" :alt="course.course.name" class="img-responsive">
          </a>
        </div>
        <div class="course-info">
          <div class="title">{{course.course.name}}</div>
          <div class="metas clearfix">
              <span class="course-price-widget">
                <span class="price">
                  <span class="color-success">{{course.course.price == 0 ? '免费' : course.course.price+'元'}}</span>
                </span>
              </span>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="row" v-if="type == 3">
    <div class="empty" v-if="courses.length==0">暂无在教课程</div>
    <div class="col-lg-3 col-md-4 col-xs-6" v-for="(course, index) in courses">
      <div class="course-item">
        <div class="course-img">
          <a :href="'/course/' + course.id + '/info'" target="_blank">
            <img :src="course.cover" :alt="course.name" class="img-responsive">
          </a>
        </div>
        <div class="course-info">
          <div class="title">{{course.name}}</div>
            <div class="metas clearfix">
                <span class="course-price-widget">
                  <span class="price">
                    <span class="color-success">{{course.price == 0 ? '免费' : course.price+'元'}}</span>
                  </span>
                </span>
            </div>
          </div>
       </div>
     </div>
  </div>

</div>

<script>
  var homeCourseVm = new Vue({
    el: '#homeCourse',
    data: {
      uid: vm.uid,
      courses: [],
      learn_courses: [],
      collect_courses: [],
      type: vm.tabIndex
    },
    methods: {
      getTeachingCourse: function () {
        var homeCourseVm = this;
        $.post('/course/api/public/page', {size: 8, uid: vm.user.id}, function (data) {
          if (data.success) {
            homeCourseVm.courses = data.payload.rows;
          }
        })
      },
      getLearningCourse: function () {
        var homeCourseVm = this;
        $.post('/course/learn/api/page', {over: false, uid: vm.user.id, size:8}, function (data) {
          if (data.success) {
            homeCourseVm.learn_courses = data.payload.rows;
          }
        })
      },
      getCollectCourse: function () {
        var homeCourseVm = this;
        $.post('/course/page', {uid: vm.user.id, size: 8}, function (data) {
          if (data.success) {
            homeCourseVm.collect_courses = data.payload.rows;
          }
        })
      }
    },
    created: function () {
      if (vm.tabIndex == 1) {
        this.getLearningCourse();
      } else if (vm.tabIndex == 2) {
        this.getCollectCourse();
      } else if (vm.tabIndex == 3){
        this.getTeachingCourse();
      }
    }
  })  
</script>
 
